import React, { memo } from 'react';

import { AnchorWrapper } from "./style";
import ThemeHeaderSmall from "@/components/theme-header-small";

import { hotAnchor } from "@/common/local-data";
import { formatImageSize } from "@/utils/format-utils";

const HotAnchor = memo(() => {
  return (
    <AnchorWrapper>
      <ThemeHeaderSmall title="热门主播" />

      <div className="anchor-list">
        {
          hotAnchor.map(item => {
            return (
              <div className="item" key={item.picUrl}>
                <a href=" " className='image'>
                  <img src={formatImageSize(item.picUrl, 40)} alt={item.name}/>
                </a>

                <div className="info">
                  <div className="name">{item.name}</div>
                  <div className="posit text-nowrap">{item.position}</div>
                </div>
              </div>
            )
          })
        }
      </div>
    </AnchorWrapper>
  )
})

export default HotAnchor